<template>
  <div class="addshop">
    <div class="addshop_top">
      <el-steps :active="active" finish-status="success">
        <el-step title="选择拼团商品" />
        <el-step title="填写基础信息" />
        <el-step title="修改商品详情" />
      </el-steps>
    </div>
    <component :is="changeName" ref="activeComponent" />
    <div class="addshop_bottom">
      <el-button v-if="active > 1" style="margin-top: 12px" @click="prevFn()">
        上一步
      </el-button>
      <el-button
        v-if="changeName !== 'Thesort'"
        style="margin-top: 12px"
        @click="next"
      >
        下一步
      </el-button>
      <el-button
        v-if="changeName == 'Thesort'"
        style="margin-top: 12px"
        @click="submite"
      >
        提交
      </el-button>
    </div>
  </div>
</template>
<script>
import Theform from "./Theform.vue";
import Thesort from "./Thesort.vue";
import Theword from "./Theword.vue";
export default {
  components: {
    Theform,
    Thesort,
    Theword,
  },
  data() {
    return {
      active: 1,
      changeName: "Theform",
      obj: {},
    };
  },
  created() {},
  methods: {
    prevFn() {
      if (this.active > 1) {
        this.active--;
        switch (this.active) {
          case 1:
            this.changeName = "Theform";
            break;
          case 2:
            this.changeName = "Theword";
            break;
          case 3:
            this.changeName = "Thesort";
            break;
        }
      }
    },
    next() {
      if (this.active >= 0 && this.active < 4) {
        switch (this.active) {
          case 1: //验证是否通过
            this.$refs.activeComponent.submitForm("ruleForm").then(
              (ress) => {
                Object.assign(this.obj, this.$refs.activeComponent.ruleForm);
                this.active++;
                this.changeName = "Theword";
                console.log(ress);
              },
              (err) => {
                this.$message.error(err);
              }
            );
            break;
          case 2: //富文本是否有内容
            if (this.$refs.activeComponent.editorContent) {
              Object.assign(this.obj, this.$refs.activeComponent.editorContent);
              this.active++;
              this.changeName = "Thesort";
            } else {
              this.$message.error("请输入商品详情");
            }
            break;
          case 3:
            if (this.$refs.activeComponent.validate()) {
              this.obj.sortnum = this.$refs.activeComponent.sortnum;
              this.obj.starnum = this.$refs.activeComponent.starnum;
              this.obj.nonum = this.$refs.activeComponent.nonum;
              return true;
            } else {
              this.$message.error("请修改");
            }

            break;
        }
      }
    },
    submite() {
      if (this.next()) {
        console.log(this.obj);
        this.$router.push("/management/soldOut");
        // this.$router.push("../groupWork/groupWorkShop/groupWorkShop.vue");
      }
      // this.$router.push("/marketing/groupWork/groupWorkShop/groupWorkShop.vue");
    },
  },
};
</script>
<style lang="scss" scoped>
.addshop {
  width: 100%;
  height: 100%;
  .addshop_bottom {
    margin-top: 50px;
  }
}
</style>